<template>
   <div id="demo">
      <!--<button @click="show =!show" >-->
        <!--Toggle-->
      <!--</button>-->
     <!--<transition name="fade">-->
      <!--<p v-if="show">Hello</p>-->
     <!--</transition>-->
    <div>
     <button @click="show =!show" >
       Toggle02
     </button>
     <transition appear name="slide-fade">
       <p v-if="show">Hello</p>
     </transition>
    </div>
     <div id="example-2">
       <button @click="show2 = !show2">Toggle show</button>
       <transition name="bounce">
         <p v-if="show2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
       </transition>
     </div>
   </div>
</template>

<script>
export default {
  name: 'animationVue',
  data () {
    return {
      show: true,
      show2: true
    }
  }
}
</script>

<style scoped>
  /*
  v-enter: 定义进入过度开始状态。在元素被插入之前生效，在元素下一帧移除
  v-enter-active:过渡生效时，整个过渡期应用，元素被插入前生效，过渡/动画完成后移除，这个类可以定义过渡过程的时间，延迟和曲线函数
  v-enter-to:2.1.8leve以上定义进入过渡的结束状态。在元素被插入的下一帧生效（同时v-enter被移除），在过渡/动画完成后移除
  v-leave:过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  v-leave-active：离开过渡生效时的状态,在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
  注意：<transition>没有name则默认v- ，否则name='demo'   demo-enter
  */
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .slide-fade-enter-active {
    transition: .3s ease;
  }
  .slide-fade-leave-active {
    transition:  .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
